<!-- 
 * by: wei_sc2
 * time: 2020-10-09
 * desc: 日志备份主页面
 -->
<template>
  <div class="container-page">
    <fks-query-page
      v-loading="loading"
      :total="total"
      :page-size.sync="size"
      :current-page.sync="page"
      :page-sizes="[20, 50, 100]"
      layout="total, sizes, prev, pager, next, jumper"
      highlight-current-row
      :table-name="LANG.LOG_BACKUP"
      :data="logData"
      @sort-change="sortHandler"
      @query="getLogBackup"
    >
      <template slot="singleSearch">
        <div class="single-searchBox">
          <fks-button
            v-permission="['log:backup']"
            type="primary"
            icon="fks-icon-plus"
            @click="openDialog"
          >
            {{ LANG.BACKUP }}
          </fks-button>
        </div>
      </template>
      <template>
        <fks-table-column
          type="index"
          label="#"
          align="center"
          min-width="50px"
        />
        <fks-table-column
          prop="backupDate"
          :label="LANG.BACKUP_DATE"
          align="center"
        >
          <template slot-scope="scope">
            {{
              scope.row.backupDate
                ? $dayjs(scope.row.backupDate).format('YYYY-MM-DD')
                : ''
            }}
          </template>
        </fks-table-column>
        <fks-table-column
          prop="createDate"
          :label="LANG.BACKUP_TIME"
          align="center"
        />
        <fks-table-column
          prop="size"
          :label="LANG.BACKUP_SIZE"
          sortable="custom"
          header-align="center"
          align="center"
        >
          <template slot-scope="scope">
            {{
              scope.row.size > 1024
                ? (scope.row.size / 1024).toFixed(2) + 'Mb'
                : scope.row.size + 'kb'
            }}
          </template>
        </fks-table-column>
        <fks-table-column
          prop="userFullname"
          :label="LANG.CREATE_BY"
          sortable="custom"
          header-align="center"
          align="center"
        />
        <fks-table-column :label="LANG.OPERATION" width="150" align="left">
          <template slot-scope="scope">
            <fks-button
              v-permission="['logback:down']"
              type="text"
              @click="downloadBackup(scope.row.groupToken)"
            >
              {{ LANG.DOWNLOAD }}
            </fks-button>
            <fks-button
              v-permission="['logback:delete']"
              danger-text
              @click="deleteBackup(scope.row.id)"
            >
              {{ LANG.DELETE }}
            </fks-button>
          </template>
        </fks-table-column>
      </template>
    </fks-query-page>
    <fks-dialog
      :title="LANG.BACKUP"
      :visible.sync="dialogVisible"
      :append-to-body="true"
      width="480px"
    >
      <div slot="title"><i class="fks-icon-plus" />{{ LANG.BACKUP }}</div>
      <fks-form>
        <fks-form-item :label="LANG.BACKUP_DATE">
          <fks-date-picker
            v-model="date"
            style="width: 100%"
            type="date"
            :placeholder="LANG.DATE"
            :clearable="false"
          />
        </fks-form-item>
      </fks-form>
      <div slot="footer">
        <!-- <fks-button @click="cancel">取 消</fks-button> -->
        <fks-button type="primary" icon="fks-icon-check" @click="done">
          {{ LANG.BACKUP_NOW }}
        </fks-button>
      </div>
    </fks-dialog>
  </div>
</template>
<script>
import { getLogData, backupLog, deleteLog } from './api'
import { downloadZip } from '@/api/file'
import { exportFile } from '@/utils/file'
import Mix from '@/mixins/module'
export default {
  name: 'LogBackup',
  mixins: [Mix],
  data() {
    return {
      total: 0,
      logData: [],
      loading: false,
      date: this.$dayjs().format('YYYY-MM-DD'),
      size: 20,
      page: 1,
      dialogVisible: false,
      sortName: '',
      sortType: ''
    }
  },
  mounted() {
    this.getLogBackup()
  },
  methods: {
    //当表格的排序条件发生变化的时候会触发该事件
    sortHandler(data) {
      let params = {}
      if (!data.order) {
        this.sortType = ''
        this.sortName = ''
      } else {
        this.sortType = data.order == 'ascending' ? 'asc' : 'desc'
        this.sortName =
          (data.prop == data.prop) == 'size' ? 'size' : 'user_fullname'
      }
      params = {
        page: this.page,
        size: this.size,
        sortType: this.sortType,
        sortName: this.sortName
      }
      this.getLogDataList(params)
    },
    //字节转化为kb
    changeType(val) {
      let size = (val / 1024).toFixed(2)
      return size
    },
    // 日志备份分页查询
    getLogBackup() {
      this.loading = true
      let params = {
        page: this.page,
        size: this.size,
        sortType: this.sortType,
        sortName: this.sortName
      }
      this.getLogDataList(params)
    },
    //获取日志备份列表
    getLogDataList(params) {
      getLogData(params)
        .then((res) => {
          if (res.status) {
            this.logData = res.data.list
            this.total = res.data.total
            this.logData.forEach((item) => {
              item.size = this.changeType(item.size)
            })
          } else {
            this.logData = []
          }
          this.loading = false
        })
        .catch(() => {
          this.loading = false
          this.logData = []
          this.total = 0
        })
    },
    //根据指定日志备份日志
    backup() {
      let params = {
        date: this.date
          ? this.$dayjs(this.date).format('YYYY-MM-DD hh:mm:ss')
          : this.$dayjs().format('YYYY-MM-DD hh:mm:ss'),
        page: this.page,
        size: this.size
      }
      backupLog(params)
        .then((res) => {
          this.getLogBackup()
          if (res.status) {
            this.$message({
              type: 'success',
              message: this.LANG.BACKUP_SUCCESS
            })
          }
        })
        .catch(() => {
          // this.$message({
          //   type: 'error',
          //   message: '日志备份失败'
          // })
        })
    },
    //下载日志文件
    downloadBackup(val) {
      downloadZip(val)
        .then((res) => {
          if (res.status) {
            exportFile(res)
            this.$message({
              type: 'success',
              message: this.LANG.DOWNLOAD_SUCCESS
            })
          }
        })
        .catch(() => {
          // this.$message({
          //   type: 'error',
          //   message: '日志文件下载文件失败'
          // })
        })
    },
    //根据id删除对应的日志文件
    deleteBackup(id) {
      this.$confirm(this.LANG.CONFIRM_TIPS, this.LANG.TIPS, {
        type: 'warning',
        confirmButtonText: this.LANG.DELETE,
        cancelButtonText: this.LANG.CANCEL,
        confirmButtonClass: 'fks-button--danger',
        deleteMode: true
      })
        .then(() => {
          let data = {
            id: id
          }
          deleteLog(data)
            .then((res) => {
              if (res.status) {
                this.$message.success(this.LANG.DELETE_SUCCESS)
                this.getLogBackup()
              }
            })
            .catch(() => {})
        })
        .catch(() => {})
    },
    //打开详情弹框
    openDialog() {
      this.dialogVisible = true
    },
    //关闭详情弹框
    cancel() {
      this.dialogVisible = false
    },
    //备份日志操作
    done() {
      this.backup()
      this.dialogVisible = false
    }
  }
}
</script>
<style lang="scss" scoped>
.container-page {
  position: relative;
  min-width: 478px;
  height: 100%;
}

.footer {
  position: relative;
  margin-right: 32px;
}

::v-deep .fks-dialog__body {
  padding-bottom: 0;
}
</style>